<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Orders Management System</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>

<body>

<div class="container my-2 border">
  <h1 class="text-center">Orders Management System</h1>

  <table border="1" class = "table table-condensed table-dark table-hover text-info table-bordered table-hover text-center">
    <thead>
    <tr>
      <th>
        <a th:href="@{'/page/' + ${currentPage} + '?sortField=orderID&sortDir=' + ${reverseSortDir}}">
          orderID</a>
      </th>
      <th>
        <a th:href="@{'/page/' + ${currentPage} + '?sortField=time&sortDir=' + ${reverseSortDir}}">
          time</a>
      </th>
      <th>
        <a th:href="@{'/page/' + ${currentPage} + '?sortField=consignee&sortDir=' + ${reverseSortDir}}">
          consignee</a>
      </th>
      <th>
        <a th:href="@{'/page/' + ${currentPage} + '?sortField=addr&sortDir=' + ${reverseSortDir}}">
          addr</a>
      </th>
      <th>
        <a th:href="@{'/page/' + ${currentPage} + '?sortField=status&sortDir=' + ${reverseSortDir}}">
          status</a>
      </th>
      <th>Actions</th>
    </tr>
    </thead>

    <tbody>
    <!--    th:each 元素遍历-->
    <tr th:each="orders : ${byStatus}">
      <!--th:text 用于指定标签显示的内容-->
      <td th:text="${orders.orderID}"></td>
      <td th:text="${orders.time}"></td>
      <td th:text="${orders.consignee}"></td>
      <td th:text="${orders.addr}"></td>
      <td th:text="${orders.status}"></td>

      <!--定位到controller层下-->
      <td>
        <a th:href="@{/showFormForUpdate/{id}(id=${orders.id})}" class="btn btn-primary">更新</a>
        <a th:href="@{/deleteOrders/{id}(id=${orders.id})}" class="btn btn-danger">删除</a>
      </td>
    </tr>
    </tbody>
  </table>

<!--&lt;!&ndash;     th:if 条件判断，如果为真&ndash;&gt;-->
<!--  <div th:if = "${totalPages > 1}">-->

<!--    <div class = "row col-sm-10">-->
<!--      &lt;!&ndash;显示一共有几行数据&ndash;&gt;-->
<!--      <div class = "col-sm-3">-->
<!--        Total Rows: [[${totalItems}]]-->
<!--      </div>-->

<!--      &lt;!&ndash;显示页数&ndash;&gt;-->
<!--      <div class = "col-sm-5">-->
<!--        <span th:each="i: ${#numbers.sequence(1, totalPages)}">-->
<!--            <a th:if="${currentPage != i}" th:href="@{'/page/' + ${i}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">[[${i}]]</a>-->
<!--            <span th:unless="${currentPage != i}">[[${i}]]</span>  &nbsp; &nbsp;-->
<!--        </span>-->
<!--      </div>-->

<!--      &lt;!&ndash;切换到下一页&ndash;&gt;-->
<!--      <div class = "col-sm-1">-->
<!--        <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${currentPage + 1}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">Next</a>-->
<!--        <span th:unless="${currentPage < totalPages}">Next</span>-->
<!--      </div>-->

<!--      &lt;!&ndash;切换到最后一页&ndash;&gt;-->
<!--      <div class="col-sm-1">-->
<!--        <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${totalPages}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">Last</a>-->
<!--        <span th:unless="${currentPage < totalPages}">Last</span>-->
<!--      </div>-->

<!--    </div>-->

<!--  </div>-->

  <div style="display: flex; color: #000000; justify-content: center; align-items: center;">
    <a th:href="@{/}" style="text-align: center;">Back to Orders List</a>
  </div>
</div>

</body>
</html>





